<template>
  <div class="strength-top gap-row-5 d-flex justify-end text-graydisabled font-size-10 font-weight-400">
    <div class="d-flex align-center gap-row-2">
      <div class="strength-bar" :class="[password ? 'bg-primary-x' : 'bg-graydisabled']"></div>
      <div class="strength-bar" :class="[mediumSchema ? 'bg-primary-yellow' : 'bg-graydisabled']"></div>
      <div class="strength-bar" :class="[strongSchema ? 'bg-primary-green' : 'bg-graydisabled']"></div>
    </div>
    <span>{{ strengthText }}</span>
  </div>
</template>
<script setup>
import { computed, watch } from 'vue'
import { $t } from '@/i18n'
import { useYup } from '@/plugins/yup'

const { string } = useYup()

const props = defineProps({
  password: {
    type: String,
    required: true,
  },
})

const emit = defineEmits(['update:strength'])

const weakSchema = computed(() => string().weakPassword().isValidSync(props.password))
const mediumSchema = computed(() => string().mediumPassword().isValidSync(props.password))
const strongSchema = computed(() => string().strongPassword().isValidSync(props.password))

const strengthText = computed(() => {
  const schema = [weakSchema, mediumSchema, strongSchema].filter((item) => item.value !== false)
  switch (schema.length) {
    case 3:
      return $t('strength.strong')
    case 2:
      return $t('strength.medium')
    case 1:
    case 0:
    default:
      return $t('strength.weak')
  }
})

watch(
  () => props.password,
  () => {
    emit('update:strength', strengthText.value)
  },
)
</script>
<style lang="scss" scoped>
.strength {
  &-top {
    padding-top: 0.40625rem;
  }
  &-bar {
    border-radius: 0.21875rem;
    width: 1.52083125rem;
    height: 0.4375rem;
    background-color: rgb(var(--v-theme-graydisabled));
  }
}
</style>
